<!-- 饼图 -->
<template>
  <div>
    <el-card>
      <template #header> 商品类别访问量 </template>
      <div :id="id" :class="className" :style="{ height, width }"></div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { getProductStats } from "@/api/product/stats";
let pieXAxis = [];
let pieYAxis = [];
const props = defineProps({
  id: {
    type: String,
    default: "pieChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});
const chart = ref<any>("");
let pieStatsInfos = [{value:0,name:'无数据'}];
onMounted(async () => {
  const res = await getProductStats();
  if (res.data.pieStatsInfos !== null&&res.data.pieStatsInfos.length>0) {
    pieStatsInfos = res.data.pieStatsInfos;
  }

  const options = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        saveAsImage: { show: true }
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
      {
        labelLine: {
          show: false, //隐藏指示线
        },
        label: {
          show: true, //标示文字
          position:'inner',//饼图上的数据展示位置inner是展示在内部
          formatter:'{b}:{c} ({d}%)'//饼图上展示的数据格式
        },

        name: '商品类别访问量',
        type: 'pie',
        radius: [20, 140],
        center: ['50%', '50%'],
        itemStyle: {
          borderRadius: 6
        },
              data: pieStatsInfos.sort(function (a, b) {
                return a.value - b.value;
              }),
      }
    ]
  };
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );

  chart.value.setOption(options);

  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});

onActivated(() => {
  if (chart.value) {
    chart.value.resize();
  }
});
</script>
